<template>
  <div class="scenecont">
    <div style="width: 1200px; margin: 0 auto">
      <!-- 面包屑 -->
      <a-breadcrumb class="Allbreadcrumb" separator=">">
        <a-breadcrumb-item>
          <a href="/">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item
          ><a href="/competition/index">大赛活动</a>
        </a-breadcrumb-item>
        <a-breadcrumb-ite style="color: #ffbe37">全部场景</a-breadcrumb-ite>
      </a-breadcrumb>
      <!-- 筛选条件 -->
      <div class="screen">
        <div>
          <span>赛道筛选:</span>
          <div class="inlineb">
            <a-radio-group v-model:value="value1" size="large">
                    <a-radio-button value="a">全部</a-radio-button>
                    <a-radio-button value="b">互联网及服务</a-radio-button>
                    <a-radio-button value="c">文创</a-radio-button>
                    <a-radio-button value="d">教育</a-radio-button>
                    <a-radio-button value="e">大健康</a-radio-button>
                    <a-radio-button value="f">认证</a-radio-button>
                  </a-radio-group>
          </div>
        </div>
        <div class="mt20">
          <span>高级筛选:</span>
          <div class="inlineb">

            <a-select
                  v-model:value="value2"
                  :size="size"
                  style="width: 96px;margin-left: 8px;"
                >
                <a-select-option
                        v-for="(item,index) in options"
                        :key="index"
                        :value="item.id"
                        >
                            {{ item.val }}
                        </a-select-option>
            </a-select>
            <a-select
                  v-model:value="value3"
                  :size="size"
                  style="width: 96px;margin-left: 8px;"
                >
            <a-select-option
                        v-for="(item,index) in options2"
                        :key="index"
                        :value="item.id"
                        >
                            {{ item.val }}
                        </a-select-option>
            </a-select>
            <div class="searching">
              <a-input-search
                    v-model:value="value"
                    placeholder="输入场景名称"
                    style="width: 240px;height: 32px;"
                    @search="onSearch"
                  />
            </div>
          </div>
        </div>
      </div>

      <!-- 场景列表 -->
      <div class="scenelist">
        <ul class="listul">
        	<li v-for="(item,i) in sceneData">
            <div>
              <span class="lefttxt" @click="gotoproject()">{{item.title}}</span>
              <span class="wxfr" v-if="item.state==1" >
                <span class="livongpoint"></span>
                <span class="livingtxt">直播中</span>
              </span>
            </div>
            <div class="txt9">
              活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求…
            </div>
            <div class="txt10">
              初赛  |  已报名100人
            </div>
            <div class="topnum topnum1" v-if="i==0">
              TOP 1
            </div>
            <div class="topnum topnum2" v-else-if="i==1">
              TOP 2
            </div>
            <div class="topnum topnum3" v-else-if="i==2">
              TOP 3
            </div>
            <div class="topnum topnum4" v-else-if='i<10 && i>2'>
              TOP {{i+1}}
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <div class="pagenation">
          <a-pagination v-model:current="current" :total="50" show-less-items />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1:'a',
        value2:'1',
        value3:'1',
        size:'small',
        options:[{ id: '1', val: '综合排序' }],
        options2:[{ id: '1', val: '状态' }],
        sceneData:[
          {title:'低代码',state:0,},
          {title:'低代码',state:1,},
          {title:'低代码',state:0,},
          {title:'低代码',state:0,},
          {title:'低代码',state:1,},
          {title:'低代码',state:0,},
          {title:'低代码',state:1,},
          {title:'低代码',state:0,},
          {title:'低代码',state:0,},
          {title:'低代码',state:1,},
          {title:'低代码',state:0,},
          {title:'低代码',state:0,},
          {title:'低代码',state:0,},
          {title:'低代码',state:1,},
          {title:'低代码',state:0,},
          {title:'低代码',state:0,},
        ]
      }
    },

    watch: {

    },
    mounted() {


    },
    methods: {
      gotoproject(){
        this.$router.push('/competition/track')
      },
    }
  }
</script>

<style scoped="scoped">
  .screen{
    width: 1200px;
    height: 108px;
    background: #FFFFFF;
    padding:10px 24px 0 24px;
  }

  .topnum{
    width: 52px;
    height: 18px;

    border-radius: 100px 0px 0px 100px;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 18px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 18px;
  }

  .topnum1{
    background: #F8AC00;
  }
  .topnum2{
    background: #A1A7BE;
  }
  .topnum3{
    background: #DC846F;
  }
  .topnum4{
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #D51313;
  }

  .txt9{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-top: 12px;
    margin-bottom: 8px;
    line-height: 20px;
  }

  .pagenation{
    text-align: center;
    margin: 40px 0;
  }

  .lefttxt{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #1A1A1A;
    cursor: pointer;
  }

  .txt10{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .livingtxt {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #F45827;
  }

  .livongpoint {
    width: 4px;
    height: 4px;
    background: #F45827;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
    margin-left: 16px;
  }

  .scenelist{
    width: 1225px;
    margin-top: 20px;
  }

  .listul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
  }

  .listul>li{
    display: inline-block;
    width: 282px;
    height: 126px;
    background: #FFFFFF;
    padding:16px;
    margin-bottom: 24px;
    position: relative;
    margin-right: 24px;
  }

  .scenecont{
    background: #F5F6FA;
    min-height: 500px;
    padding-bottom: 1px;
  }
  .mt20{
    margin-top: 14px;
  }
  .box{
      min-height: calc(100vh - 284px);
      width: 1440px;
      height: 1268px;
      background: #F5F6FA;
  }

  .searching{
    float: right;
    margin-top: -10px;
  }

  .inlineb{
    display: inline-block;
    width: 1083px;
  }

  .color99{
    color:#999;
  }

  /deep/ .ant-radio-button-wrapper{
    color: #1A1A1A;
    border: 0;
  }
  /deep/ .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    z-index: 1;
    color: #FFBE37!important;
    background: #fff;
    border: 0;
}

/deep/ .ant-radio-button-wrapper:not(:first-child)::before {
    position: absolute;
    width: 0px;
    height: 100%;
    padding: 1px 0;
    background-color:none;
    transition:0;
}
</style>
